<!-- 上传动态链接库弹窗 -->
<template>
    <div class="upload-dll-dialog">
        <el-dialog title="选择试验" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
            <div class="upload-dll">
                <el-upload class="upload-file" drag :on-success="handleFileSuccess"
                    action="https://jsonplaceholder.typicode.com/posts/">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button class="jtyj-btn-cancel" @click="dialogVisible = false">取 消</el-button>
                <el-button class="jtyj-btn-primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getScenarioTree } from "@/api/myspace/scenario-edit-tool/scenario-edit";
import Tree from "@/components/LeftTree/tree.vue";
export default {
    name: "SelectExperimentDialog",
    data() {
        return {
            dialogVisible: false,
            experimentDataList: [],
            uploadFileId: null, // 上传成功的文件
        }
    },
    components: {
        Tree
    },
    created() {
        this.getExperimentTree();
    },
    methods: {
        getExperimentTree() {
            getScenarioTree().then((response) => {
                if (response.code === 200) {
                    this.experimentDataList = response.data[0].commonTreeList;
                }
            });
        },
        handleFileSuccess(response, file, fileList) {
            console.log('response', response);
            console.log('file', file);
            console.log('fileList', fileList);
            this.uploadFileId = response.id;
        },
        submit() {
            if (this.uploadFileId) {
                console.log("本地上传提交");
                this.dialogVisible = false;
            } else {
                console.log("上传文件后提交");
            }
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.upload-dll-dialog {
    .upload-dll {
        width: 550px;
        height: 600px;

        .upload-file {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>